<template>
    <div class="wrap mall-detail" v-if="$route.name==='mallDetail'">
        <div class="wrap-cont">
            <div class="wrap-cont-cover">
                <div class="display">
                    <el-card class="box-card">
                        <img
                            class="image"
                            :src="baseURL+image"
                            v-if="image">
                        <img src="../../../static/img/logo.png" v-else>
                    </el-card>

                    <div class="filter describe">
                        <!-- 根据当前列最长的文字 比如最长是4个人字 filter-item_4 -->
                        <div class="filter-item_4">
                            <div class="filter-item">
                                <div class="filter-item-key">商品名称：</div>
                                <div class="filter-item-val">
                                    {{name}}
                                </div>
                            </div>
                            <div class="filter-item">
                                <div class="filter-item-key">价格：</div>
                                <div class="filter-item-val">
                                    {{price}}
                                </div>
                            </div>
                            <div class="filter-item">
                                <div class="filter-item-key">商品描述：</div>
                                <div class="filter-item-val">
                                    {{content}}
                                </div>
                            </div>
                            <div class="filter-item">
                                <div class="filter-item-key">商品库存：</div>
                                <div class="filter-item-val">
                                    {{stock}}
                                </div>
                            </div>
                            <div class="filter-item"  v-if="id!=sellerId">
                                <div class="filter-item-key">数量：</div>
                                <div class="filter-item-val">
                                    <el-input-number v-model="number" :min="1"
                                                     size="mini"
                                                     :max="10"></el-input-number>
                                </div>
                            </div>
                            <div>
                                <el-button size="mini" type="primary"
                                           @click="deleteGood"
                                           v-if="id==sellerId">删除
                                </el-button>
                                <template v-else>
                                    <el-button size="mini" @click="dialogVisible = true">付款</el-button>
                                    <el-button size="mini" type="primary" @click="addToCart">加入购物车</el-button>
                                </template>

                            </div>

                        </div>
                    </div>
                    <el-dialog
                        title="付款确认"
                        :visible.sync="dialogVisible"
                        width="40%">
                        <div class="filter-item_4">
                            <div class="filter-item">
                                <div class="filter-item-key">收货人：</div>
                                <div class="filter-item-val">
                                    {{userInfo.name}}
                                </div>
                            </div>
                            <div class="filter-item">
                                <div class="filter-item-key">地址：</div>
                                <div class="filter-item-val">
                                    {{userInfo.address}}
                                </div>
                            </div>
                            <div class="filter-item">
                                <div class="filter-item-key">联系方式：</div>
                                <div class="filter-item-val">
                                    {{userInfo.mobile}}
                                </div>
                            </div>
                            <div class="filter-item">
                                <div class="filter-item-key">数量：</div>
                                <div class="filter-item-val font-hidden">
                                    {{number}}
                                </div>
                            </div>
                            <div class="filter-item">
                                <div class="filter-item-key">支付密码：</div>
                                <div class="filter-item-val">
                                    <el-input placeholder="请输入密码" v-model="payCode" size="mini"
                                              type="password"></el-input>
                                </div>
                            </div>
                        </div>

                        <span slot="footer" class="dialog-footer">
                                <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
                                <el-button type="primary" @click="handelPay()" size="mini">确 定</el-button>
                            </span>
                    </el-dialog>

                </div>

            </div>
        </div>
    </div>

</template>

<script>
    import _axios, {baseURL} from "../../utils/axios";

    export default {
        name: "detail",
        data() {
            return {
                baseURL: baseURL,
                content: '',
                price: '',
                name: '',
                stock: '',
                image: '',
                sellerId: '',
                sellerMobile: '',
                sellerName: '',
                id: '',
                goodId: '',
                number: 0,
                dialogVisible: false,
                payCode: '',
                userInfo: ''
            }
        },
        methods: {
            getDetail() {
                _axios.get('/api/api/goods/get?goodsId=' + this.$route.query.id).then(res => {
                    this.content = res.data.description;
                    this.price = res.data.price;
                    this.name = res.data.name;
                    this.stock = res.data.stock;
                    this.image = res.data.images;
                    this.sellerId = res.data.sellerId;
                    this.sellerMobile = res.data.sellerMobile;
                    this.sellerName = res.data.sellerName;
                    this.goodId = res.data.id;
                });
            },
            addToCart() {
                this.$api.mall.addCart({
                    "goodsCount": this.number,
                    "goodsId": this.$route.query.id,
                    "userId": this.id
                }).then(res => {
                    this.$message.success('操作成功');
                })
            },
            deleteGood() {

                this.$message.success('删除成功');
                this.$router.back();

            },
            handelPay() {
                this.$api.mall.addOrder({
                    "address": this.userInfo.address,
                    "orderGoodsDtoList": [
                        {
                            "goodsCount": this.number,
                            "goodsId": this.goodId,
                            "goodsName": this.name,
                            "goodsSiglePrice": this.price,
                            "goodsTotalPrice": parseInt(this.price) * parseInt(this.number),
                            "sellerId": this.sellerId,
                            "sellerMobile": this.sellerMobile,
                            "sellerName": this.sellerName
                        }
                    ],
                    "payCode": this.payCode,
                    "receiveMobile": this.userInfo.mobile,
                    "receiver": this.userInfo.name,
                    "userId": this.id
                }).then(res => {
                    if (res.code === 200) {
                        this.$message.success('交易成功');
                        this.getDetail();
                        this.dialogVisible = false;
                    } else {
                        this.$message.error(res.msg);
                        this.payCode = '';
                        this.dialogVisible = false;
                    }


                })
            },

        },
        mounted() {
            setTimeout(() => {
                this.$eventBus.emit('updateTitle', this.$route.params.name);
            });
            this.getDetail();
            this.id = sessionStorage.getItem('id');
        },
        watch: {
            'dialogVisible'(val) {
                if (val) {
                    _axios.get('/api/api/user/getById?userId=' + this.id).then(res => {
                        this.userInfo = res.data;
                    })
                }
            }
        }

    }
</script>

<style rel="stylesheet/scss" lang="scss">
    .mall-detail {
        .mall-detail {
            float: left;
        }
        .box-card {
            width: 300px;
            height: 350px;
        }
        .image {
            width: 290px;
            height: 340px;
        }
        .describe {
            margin-left: 32px;
            margin-right: 32px;
            line-height: 40px;
        }
        .display {
            display: flex;
        }
        .el-textarea {
            width: 65%;
        }
        .el-dialog__body {
            padding-bottom: 0px;
        }
    }
</style>
